<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="my">
        <span slot="label"><i class="el-icon-user-solid" style="margin-right: 5px" />我的客户</span>
<!--        <CustomerIndex  v-if="myState" :is="my" :action="activeName" />-->
        <CustomerBlockIndex  v-if="myState" :is="my" :action="activeName" :tabIndex="1" />
      </el-tab-pane>
      <el-tab-pane name="intention">
        <span slot="label"><i class="el-icon-s-custom" style="margin-right: 5px" />意向客户</span>
<!--        <CustomerIndex  v-if="intentionState" :is="intention" :action="activeName" />-->
        <CustomerBlockIndex  v-if="intentionState" :is="intention" :action="activeName" :tabIndex="2" />
      </el-tab-pane>
      <el-tab-pane name="water">
        <span slot="label"><i class="el-icon-s-opportunity" style="margin-right: 5px"/>公海客户</span>
<!--        <CustomerIndex  v-if="waterState" :is="water" :action="activeName" />-->
        <CustomerBlockIndex  v-if="waterState" :is="water" :action="activeName" :tabIndex="3" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const CustomerIndex = resolve => require(['@/views/customer/index/index'], resolve)
const CustomerBlockIndex = resolve => require(['@/views/customer/index/block'], resolve)
export default {
  name: "Collect",
  props: {
    action: {
      type: String
    },
  },
  data(){
    return {
      activeName:'my',
      my:'',
      myState:false,
      intention:'',
      intentionState:false,
      water:'',
      waterState:false,
    }
  },
  mounted() {
    this.checkVue(this.activeName)
  },
  methods:{
    handleClick(tab, event) {
      this.checkVue(tab.name)
    },
    checkVue(name) {
      switch (name) {
        case 'my' :
          this.myState = false
          this.my = CustomerBlockIndex
          this.$nextTick(() => {
            this.myState = true
          })
          break;
        case 'intention' :
          this.intentionState = false
          this.intention = CustomerBlockIndex
          this.$nextTick(() => {
            this.intentionState = true
          })
          break;
        case 'water' :
          this.waterState = false
          this.water = CustomerBlockIndex
          this.$nextTick(() => {
            this.waterState = true
          })
          break;
      }
    }
  },
}
</script>

<style scoped>
/deep/ .el-tabs--border-card > .el-tabs__content{
  padding:unset!important;
}
</style>
